<script setup lang="ts">
import { SellRecordApi } from '@/apis'
import { useDictLabel, useTable } from '@/hooks'
import SellRecordSearchPanel from '@/views/shop/sell/SellRecordSearchPanel.vue'
import { downloadExcel, exportVTableToExcel } from '@visactor/vtable-export'
import { PivotTable, VTable } from '@visactor/vue-vtable'

defineOptions({
  name: 'SellStatReport',
})

const queryForm = ref({})

const {
  tableData,
  loading,
  search,
} = useTable(() => SellRecordApi.getStats({ ...queryForm.value }))

const pivotTableRef = ref<InstanceType<typeof PivotTable>>()
const options = {
  title: {
    text: '顾问业绩汇总表',
    align: 'center',
    padding: [0, 0, 20, 0],
    textStyle: {

    },
  },
  emptyTip: {
    text: '选择查询条件后点击搜索',
  },
  widthMode: 'autoWidth',
  heightMode: 'autoHeight',
  autoFillWidth: true,
  theme: VTable.themes.BRIGHT.extends({
    bodyStyle: {
      borderLineWidth: 0,
    },
  }),
  hover: {
    highlightMode: 'row',
  },
  enableLineBreak: true,
  hideIndicatorName: true,
  rows: [
    {
      dimensionKey: 'sellerName',
      title: '销售顾问',
      headerStyle: {
        textStick: true,
      },
      width: 'auto',
    },
  ],
  columns: [
    {
      dimensionKey: 'subject',
      title: '科目',
      headerStyle: {
        textStick: true,
        textAlign: 'center',
      },
      headerFormat: (data) => {
        return useDictLabel('Subject', data)
      },
      width: 'auto',
    },
  ],
  indicators: [
    {
      indicatorKey: 'performance',
      title: '业绩',
      format: (value) => {
        return value || 0
      },
      style: {
        textAlign: 'center',
      },
    },
  ],
}

// const isRefresh = ref(false)
const tableName = computed(() => {
  return `${queryForm.value.classYear ? `${queryForm.value.classYear}年` : ''}${queryForm.value.term ? useDictLabel('TermEnum', queryForm.value.term) : ''}销售业绩统计表`
})

const onSearch = async (query) => {
  queryForm.value = query
  search()
  options.title.text = tableName.value
  pivotTableRef.value?.tableInstance?.updateOption({
    ...options,
  })
}

const onExportExcel = async () => {
  // if (pivotTableRef.value) {
  //   console.log('pro=', pivotTableRef.value?.$props)
  //   downloadExcel(
  //     await exportVTableToExcel(pivotTableRef.value.tableInstance, {
  //       ignoreIcon: true,
  //     }),
  //     tableName.value,
  //   )
  // }

  downloadExcel(
    await exportVTableToExcel(pivotTableRef.value?.vTableInstance, {
      ignoreIcon: true,
    }),
    tableName.value,
  )
}

onMounted(() => {
  // resetForm()
})
</script>

<template>
  <ProPage title="顾问业绩统计" :flex-table="false" :loading="loading">
    <template #extra>
      <a-button @click="onExportExcel">
        <template #icon>
          <icon-export />
        </template>
        导出excel
      </a-button>
    </template>
    <SellRecordSearchPanel @search="onSearch" />
    <a-divider />
    <div class="h-70vh">
      <PivotTable ref="pivotTableRef" :options="options" :records="tableData" />
    </div>
  </ProPage>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-text-1);
}
</style>
